<template>
  <ContentWrap v-loading="formLoading">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" :disabled="true"
      v-loading="formLoading">
      <el-row>
        <el-divider border-style="dashed">1.发布投诉</el-divider>
        <el-col :span="12">
          <el-form-item label="发布用户" prop="nickname">
            {{ formData.name }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户电话" prop="typeId">
            {{ formData.userMobile }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户公司" prop="nickname">
            {{ formData.userCompanyName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户地址" prop="typeId">
            {{ formData.userCompanyAddress }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户城市" prop="typeId">
            {{ formData.userAreaName }}
          </el-form-item>
        </el-col>
        <el-divider border-style="dashed">2.投诉信息</el-divider>

        <el-col :span="12">
          <el-form-item label="投诉类型" prop="typeId">
           {{ formData.typeName}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="投诉标题" prop="infoName">
            {{ formData.infoName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="投诉姓名" prop="realName">
            {{ formData.realName }}
          </el-form-item>
        </el-col>

        <el-col :span="12">

          <el-form-item label="投诉手机" prop="mobile">
            {{ formData.mobile }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="投诉区域" prop="areaName">
            {{ formData.areaName }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="投诉地址" prop="address">
            {{ formData.address }}
          </el-form-item>
        </el-col>
        <el-col :span="12">

          <el-form-item label="投诉公司" prop="company">
            {{ formData.company }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="多图" prop="images">
            <UploadImgs v-model="formData.images" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="投诉描述" prop="description">
            {{ formData.description }}
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-form-item label="单图" prop="image">
        <UploadImg v-model="formData.image" :disabled="true" />
      </el-form-item>

      <el-form-item label="置顶" prop="isTop">
        <el-radio-group v-model="formData.isTop">
          <el-radio v-for="dict in getIntDictOptions(DICT_TYPE.IS_NO)" :key="dict.value" :label="dict.value"> {{
    dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item> -->
    </el-form>
    <el-form-item style="float: right">
      <el-button @click="close">返回</el-button>
    </el-form-item>
  </ContentWrap>

</template>

<script setup lang="ts">
import { ComplainInfoApi } from '@/api/wine/complaininfo'
import { useTagsViewStore } from '@/store/modules/tagsView'
// import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'

/** 投诉信息 表单 */
defineOptions({ name: 'ComplainInfoForm' })

const { delView } = useTagsViewStore() // 视图操作
const { push, currentRoute } = useRouter() // 路由

const { params } = useRoute() // 查询参数
// const isDetail=propTypes.bool.def(false)


const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  userId: undefined,
  nickname: undefined,
  typeId: undefined,
  typeName: undefined,
  infoName: undefined,
  realName: undefined,
  mobile: undefined,
  areaId: undefined,
  areaName: undefined,
  address: undefined,
  company: undefined,
  image: undefined,
  images: undefined,
  description: undefined,
  isTop: 2,
  sort: undefined,

  name:undefined,
  userMobile:undefined,
  userCompanyName:undefined,
  userCompanyAddress:undefined,
  userAreaName:undefined,
})
const formRules = reactive({
})
const formRef = ref() // 表单 Ref

const id = params.id as unknown as number
console.log("id", id);

/** 打开弹窗 */
const getDetail = async () => {
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ComplainInfoApi.getComplainInfo(id)
      formData.value.images = formData.value.images ? formData.value.images.split(',') : []
      formData.value.description = formData.value.description ? formData.value.description : ''
      formData.value.isTop = formData.value.isTop ? formData.value.isTop : 2
    } finally {
      formLoading.value = false
    }
  }
}
onMounted(async () => {
  await getDetail()
})



const close = () => {
  delView(unref(currentRoute))
  push({ name: 'ComplainInfo' })
}
</script>